<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:' 二段标题切换'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "0">
        <h3 class="mb10">组件使用</h3>
        <rx-center-title-swiper :data="title">
            <ul class="clearfix uiTab9 j_uiTab9">
                <li v-for="(item, index) of title" :key="index"
                    :class="{'uiTab9-active':subIndex == index}"
                    @click="subSwitch(index)">
                    {{item}}
                </li>
            </ul>
        </rx-center-title-swiper>
        <codemd url="Lesson2/docs/titleSwiper.md"></codemd>
        <h3 class="mb10 mt10">参数配置</h3>
        <table class="uiTable">
            <tr>
                <th>参数</th>
                <th>说明</th>
            </tr>
            <tr>
                <td>data</td>
                <td>列表数据</td>
            </tr>
        </table>
    </div>
</div>
</template>
<script>
import codemd from '../code-md'
export default {
    components: {
        codemd
    },
    data () {
        return {
            subIndex: 1,
            title: ['状', '文档', '组件', '过滤器', '指令', '工具类', '组逻', '方法', 'ELE', '占位', '最后']
        }
    },
    mounted () {

    },
    methods: {
        subSwitch (index) {
            this.subIndex = index
        }
    }
}
</script>
